<template>
  <div class="category">
    <!-- <h1>列表页面</h1> -->

    <!-- header -->
    <SearchHeader></SearchHeader>


    <div class="content">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item title="茶叶" />
        <van-sidebar-item title="茶食" />
        <van-sidebar-item title="茶具" />
        <van-sidebar-item title="茶礼盒" />
      </van-sidebar>

      <div class="c_right">
        <teaTab v-if="activeKey === 0"></teaTab>
        <teaFoodTab v-else-if="activeKey === 1"></teaFoodTab>
        <teaSetTab v-else-if="activeKey === 2"></teaSetTab>
        <teaGiftTab v-else></teaGiftTab>
      </div>
    </div>

    <TabberBar></TabberBar>
  </div>
</template>

<script>
import TabberBar from '@/components/common/Tabber.vue';
import SearchHeader from '@/components/search/SearchHeader.vue';

import teaTab from '@/components/category/teaTab.vue';
import teaFoodTab from '@/components/category/teaFoodTab.vue';
import teaSetTab from '@/components/category/teaSetTab.vue';
import teaGiftTab from '@/components/category/teaGiftTab.vue';

// import {Notify} from 'vant'

export default {
  components: {
    TabberBar,
    SearchHeader,
    teaTab,
    teaSetTab,
    teaGiftTab,
    teaFoodTab
  },
  data(){
    return {
      activeKey: 0,
    }
  },
  methods:{
    onChange(index) {
      // Notify({ type: 'primary', message: index });
      this.activeKey = index;

    },
  }
}
</script>

<style scoped>
.category{
  position: relative;
}
.van-sidebar-item{
  font-size: 18px;
  padding: 23px 12px;
}
.van-sidebar-item--select::before{
  background-color: #58c79d;
}

.c_right {
  width: 81%;
  position: absolute;
  top: 61px;
  right: 0;
}


</style>